<template>
  <a-form
    layout="horizontal"
    ref="formRef"
    :model="form"
    :rules="rules"
    :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
    :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
  >
    <a-form-item label="姓名:" name="name">
      <a-input
        v-model:value="form.name"
        placeholder="请输入姓名"
        allow-clear
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="性别:" name="sex">
      <a-input
        v-model:value="form.sex"
        placeholder="请输入性别"
        allow-clear
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="生日:" name="birthday">
      <a-input
        v-model:value="form.birthday"
        placeholder="请输入生日"
        allow-clear
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="成绩:" name="score">
      <a-input
        v-model:value="form.score"
        placeholder="请输入成绩"
        allow-clear
        autocomplete="off"
      />
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';

  const props = defineProps<{
    form: Object;
  }>();

  const rules = ref<any>({
    name: [{ required: true, message: '请输入姓名', type: 'string', trigger: 'blur' }],
    sex: [{ required: true, message: '请输入性别', type: 'string', trigger: 'blur' }],
    birthday: [{ required: true, message: '请输入出生日期', type: 'string', trigger: 'blur' }],
    score: [{ required: true, message: '请输入成绩', type: 'string', trigger: 'blur' }],
  });

  onMounted(() => {
  });

</script>
